<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE实例</title>
</head>
<div id="app">{{a}}{{b}}</div>
<body>
<script type="text/javascript" src="../../lib/vue/2.6.14/vue.js"></script>
<script type="text/javascript">
  var data = {a: '1'}
  // 赋值前冻结无法修改值
  // Object.freeze(data);
  var vm = new Vue({
      el: "#app",
      data: data,
      // 创建完成以后执行
      created: function (){
          // `this` 指向 vm 实例
          console.log('加载完成：' + this.a);
      }
  })
  console.log(vm.a);
  vm.a = 2;
  console.log(data.a);
  // 赋值后冻结不影响
  data = Object.freeze(data);
  vm.a = 3;
  console.log(vm.a,data.a);
  data.a = 4;
  console.log(vm.a,data.a);
  // 如果一开始没有定义值，那么后面赋值vue无法绑定值的变化，如果后面需要，可以一开始定义为空值
  vm.b = '6';
  console.log(vm.b,data.b);
  // 获取vue的data对象数据
  console.log(vm.$data);

</script>
</body>
</html>